﻿@{
    ViewData["Title"] = "Privacy Policy";
}
<div class="layout-main flex items-stretch flex-auto shrink-0 flex-1-0-auto w-full max-w-full h-full">
    <div id="Control"
        class="layout-sidebar pt-[var(--header-height)] flex flex-col grow-0 shrink-0 lt-md:fixed lt-md:pt-0 lt-md:top-0 lt-md:left-0 lt-md:z-999">
        <button class="lt-md:flex-center md:hidden w-56px h-60px bg-transparent" @@click="toggleSidebar">
            <i class="flex-center flex-center h-6 w-6 i-tabler:menu-2"></i>
        </button>
        <div
            class="semi-navigation pt-5 xl:pt-10 md:bg-transparent md:border-transparent! lt-md:hidden semi-navigation-vertical">
            <div class="semi-navigation-inner">
                <div class="semi-navigation-header-list-outer">
                    <div class="semi-navigation-list-wrapper"
                        style="padding: 0px 16px; width: 200px; height: calc(-300px + 100vh);">
                        <ul role="menu" aria-orientation="vertical" class="semi-navigation-list">
                            <template v-for="(item, index) in menuItems" :key="index">
                                <a v-if="!item.subItems" :href="item.href" class="block decoration-none mb-2">
                                    <li role="menuitem" tabindex="0" :aria-disabled="item.disabled"
                                        :class="['semi-navigation-item-normal semi-navigation-item', { 'semi-navigation-item-selected': item.selected }]">
                                        <i class="semi-navigation-item-icon semi-navigation-item-icon-info">
                                            <i class="flex-center" :class="item.iconClass"></i>
                                        </i>
                                        <span class="semi-navigation-item-text">{{ item.text }}</span>
                                        <i class="semi-navigation-item-icon semi-navigation-item-icon-toggle-right"></i>
                                    </li>
                                </a>
                                <li v-else tabindex="-1" :aria-disabled="item.disabled" :aria-expanded="item.expanded"
                                    class="semi-navigation-sub-wrap semi-navigation-item semi-navigation-item-sub">
                                    <div role="menuitem" tabindex="0" class="semi-navigation-sub-title"
                                        @@click="toggleSubMenu(index)">
                                        <div class="semi-navigation-item-inner">
                                            <i class="semi-navigation-item-icon semi-navigation-item-icon-info">
                                                <i class="flex-center" :class="item.iconClass"></i>
                                            </i>
                                            <span class="semi-navigation-item-text">{{ item.text }}</span>
                                            <i class="semi-navigation-item-icon semi-navigation-item-icon-toggle-right">
                                                <span role="img" aria-label="chevron_down"
                                                    class="semi-icon semi-icon-default semi-icon-chevron_down"
                                                    :class="{ 'semi-navigation-icon-rotate-0': !item.expanded, 'semi-navigation-icon-rotate-180': item.expanded }"
                                                    aria-hidden="true">
                                                    <svg viewBox="0 0 24 24" fill="none"
                                                        xmlns="http://www.w3.org/2000/svg" width="1em" height="1em"
                                                        focusable="false" aria-hidden="true">
                                                        <path fill-rule="evenodd" clip-rule="evenodd"
                                                            d="M4.08045 7.59809C4.66624 7.01231 5.61599 7.01231 6.20177 7.59809L11.8586 13.2549L17.5155 7.59809C18.1013 7.01231 19.051 7.01231 19.6368 7.59809C20.2226 8.18388 20.2226 9.13363 19.6368 9.71941L12.9193 16.4369C12.3335 17.0227 11.3838 17.0227 10.798 16.4369L4.08045 9.71941C3.49467 9.13363 3.49467 8.18388 4.08045 7.59809Z"
                                                            fill="currentColor"></path>
                                                    </svg>
                                                </span>
                                            </i>
                                        </div>
                                    </div>
                                    <div class="semi-collapsible-wrapper"
                                        :style="{ height: item.expanded ? 'auto' : '0', opacity: item.expanded ? '1' : '0' }">
                                        <div x-semi-prop="children" style="overflow: hidden;">
                                            <ul role="menu" aria-orientation="vertical" class="semi-navigation-list">
                                                <li v-for="(subItem, subIndex) in item.subItems" :key="subIndex"
                                                    role="menuitem" tabindex="0" :aria-disabled="subItem.disabled"
                                                    :class="['semi-navigation-item-normal semi-navigation-item', { 'semi-navigation-item-selected': subItem.selected }]">
                                                    <a :href="subItem.href" class="block decoration-none mb-2">
                                                        <span class="semi-navigation-item-text">{{ subItem.text
                                                            }}</span>
                                                    </a>
                                                </li>
                                            </ul>
                                        </div>
                                    </div>
                                </li>
                            </template>
                        </ul>
                    </div>
                </div>
                @* <div class="semi-navigation-footer">
                <div class="lt-md:hidden w-full">
                <div class="goods-list mb-5">
                <div class="goods-item rd-md shadow-card p-5 bg-1 mb-2 cursor-pointer">
                <div class="goods-item-header flex-y-center mb-2">
                <div
                class="flex-center text-white! bg-indigo-500 semi-skeleton-avatar semi-skeleton-avatar-extra-small
                semi-skeleton-avatar-circle">
                <i class="i-mynaui:store w-4 h-4"></i>
                </div>
                <span class="fw-600 ml-2 txt-0">逛逛小店</span>
                </div>
                <p class="mb-0">官方Plus会员 全程质保！</p>
                </div>
                </div>
                <button
                class="semi-button semi-button-tertiary semi-button-borderless w-full semi-button-with-icon"
                type="button" aria-disabled="false" @@click="toggleSidebar">
                <span class="semi-button-content">
                <span role="img" aria-label="sidebar"
                class="semi-icon semi-icon-default semi-icon-sidebar">
                <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" width="1em"
                height="1em" focusable="false" aria-hidden="true">
                <path fill-rule="evenodd" clip-rule="evenodd"
                d="M5 2H19C20.6569 2 22 3.34315 22 5V19C22 20.6569 20.6569 22 19 22H5C3.34315 22 2 20.6569 2 19V5C2
                3.34315 3.34315 2 5 2ZM6 4C5.44772 4 5 4.44772 5 5V19C5 19.5523 5.44772 20 6 20H9C9.55229 20 10 19.5523
                10 19V5C10 4.44772 9.55229 4 9 4H6Z"
                fill="currentColor"></path>
                </svg>
                </span>
                <span class="semi-button-content-right" x-semi-prop="children">收起侧边栏</span>
                </span>
                </button>
                </div>
                </div> *@
            </div>
        </div>
    </div>
    <div class="layout-page pt-[var(--header-height)] flex flex-col flex-auto max-w-full h-full of-y-scroll">
        <div class="flex-1">
            <iframe :src="currentUrl" class="w-full h-full border-0" frameborder="0"></iframe>
        </div>
    </div>

</div>

@section Scripts {
    <script>
        new Vue({
            el: '#Control',
            data: {
                sidebarOpen: true,
                menuItems: [
                    {
                        href: '/panel',
                        iconClass: 'i-tabler:smart-home w-5 h-5',
                        text: '控制台',
                        selected: false,
                        disabled: false,
                        subItems: null
                    },
                    {
                        href: '/panel/token',
                        iconClass: 'i-tabler:circle-key  w-5 h-5',
                        text: '令牌管理',
                        selected: false,
                        disabled: false,
                        subItems: null
                    },
                    {
                        href: '/panel/topup',
                        iconClass: 'i-tabler:brand-appgallery  w-5 h-5',
                        text: '钱包充值',
                        selected: true,
                        disabled: false,
                        subItems: null
                    },
                    {
                        href: '#',
                        iconClass: 'i-tabler:bookmark  w-5 h-5',
                        text: '日志信息',
                        selected: false,
                        disabled: false,
                        expanded: false,
                        subItems: [
                            {
                                href: '/panel/logs/request',
                                iconClass: 'i-tabler:ripple w-4.5 h-4.5',
                                text: '请求日志',
                                selected: false,
                                disabled: false
                            },
                            {
                                href: '/panel/logs/painting',
                                iconClass: 'i-tabler:photo-circle w-4.5 h-4.5',
                                text: '绘画日志',
                                selected: false,
                                disabled: false
                            },
                            {
                                href: '/panel/logs/task',
                                iconClass: 'i-tabler:topology-ring w-4.5 h-4.5',
                                text: '任务日志',
                                selected: false,
                                disabled: false
                            }
                        ]
                    },
                    {
                        href: '/panel/profile',
                        iconClass: 'i-tabler:user-square-rounded  w-5 h-5',
                        text: '我的设置',
                        selected: false,
                        disabled: false,
                        subItems: null
                    }
                ]
            },
            methods: {
                toggleSidebar() {
                    this.sidebarOpen = !this.sidebarOpen;
                },
                toggleSubMenu(index) {
                    this.menuItems[index].expanded = !this.menuItems[index].expanded;
                }
            }
        });
    </script>

}
